<template>
    <div class="header">
        <home/>
        <div style="height: 80%">
            <el-card class="text-zhe" :body-style="{'padding': '0px'}">
                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; ">
                    <span style="font-size: 24px; color: #007bff; text-align: center; display: block;margin-top: 20px;margin-bottom: 15px">{{ item.title }}</span>
                    <span style="font-size: 15px; color: #8c939d; text-align: center; display: block;">发布时间：{{ createTime }}</span>
                </div>
                <div :style="'width: 100%;'+(htmlContent?'':'height: 65vh;')+'margin-bottom: 20px'">
                    <div v-if="typeFile === 'docx'" style="padding: 10px" v-html="htmlContent"></div>
                    <div v-if="typeFile === 'pdf'" style="padding: 10px;text-align: center;width: 100%;"
                         v-html="htmlContent"></div>
                </div>
                <template #footer>
                    <div v-if="item.file" style="margin-left: 15px">
                        <span>附件：</span>
                        <div class="file">
                            <el-button :disabled="item.download===1" @click="FileDownload(item.file)" style="margin-left: 44%" link>
                                <el-icon size="25">
                                    <Document/>
                                </el-icon>
                            </el-button>
                            <el-button :disabled="item.download===1" @click="FileDownload(item.file)" link style="display: block;font-size: 13px;margin-left: 38%">
                                附件.rar
                            </el-button>
                        </div>
                    </div>
                </template>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { getFile } from "../welcome/welcomeApi.js";
import { ElMessage } from "element-plus";
import home from '../welcome/Home.vue';
import { ref, onMounted } from "vue";

const item = ref('');
const createTime = ref('');
const downloadBtn = true;
const fileUrl = ref('');
const typeFile = ref('pdf');
const htmlContent = ref('');
const FileDownload = async (data) => {
    let fileName = data;
    await getFile(fileName).then(res => {
        console.log(res);
        if (res.code === 1) {
            ElMessage.error("文件不存在");
        } else {
            let fileUrl = 'http://localhost:8082/static/img/real/' + fileName;
            let extName = fileUrl.substring(fileUrl.lastIndexOf("."));
            const link = document.createElement('a');
            link.download = fileName + extName;
            link.href = fileUrl;
            link.target = "_blank";
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
        }
    }).catch(error => {
        console.log(error);
    });
}

const channel = new BroadcastChannel('cementData');
channel.addEventListener('message', (event) => {
    item.value = event.data;
    createTime.value = item.value.createTime.split("T")[0];
    htmlContent.value=item.value.fileContent
  typeFile.value = item.value.file.split(".")[1]
});

onMounted(() => {
    if (localStorage.getItem('cementData')) {
        item.value = JSON.parse(localStorage.getItem('cementData'));
        createTime.value = item.value.createTime.split("T")[0];
        htmlContent.value=item.value.fileContent
        typeFile.value = item.value.file.split(".")[1]
    }

});
</script>

<style scoped>
.title {
    text-align: center;
    font-size: 2.5vw;
}

.text-zhe {
    margin-top: 10px;
    width: 90%;
    margin-left: 5%;
}

.content {
    margin-left: 15px;
    padding-top: 15px;
}

.file {
    width: 200px;
    height: 60px;
    border: 2px solid #efefef;
    border-radius: 8px;
}

.overlay.active {
    visibility: visible;
    opacity: 45;
}
</style>
